﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("#File").change(function(file) {
					$("body").append(file.target.files[0]);
					var url = window.URL.createObjectURL(file.target.files[0]);
					$("#player")[0].src = url;
					$("#player")[0].onload = function() {
						window.URL.revokeObjectURL(src);
					};
					$("#player").css({
						"width": "100%",
						"height": "100%"
					});
				});

				$("#File2").change(function(file) {
					$("body").append(file.target.files[0]);
					var url = window.URL.createObjectURL(file.target.files[0]);
					$("#player2")[0].src = url;
					$("#player2")[0].onload = function() {
						window.URL.revokeObjectURL(src);
					};
					$("#player2").css({
						"width": "100%",
						"height": "100%"
					});
				});

			});
		</script>
	</head>

	<body onresize="resize()">
	<h1 id="h1">ssssssssss</h1>
	<div id="tdiv" style="border-bottom:1px solid #000">
			<input id="File" type="file" id="file1" />
		<div style="height: 480px;width: 320px;">
			<video id="player" width="240" height="320" autoplay="autoplay" controls="controls" loop="loop"></video>
		</div>
		<div style="height: 480px;width: 320px;">
			<input id="File2" type="file" id="file2" />
		
			<video id="player2" width="240" height="320" autoplay="autoplay" controls="controls" loop="loop"></video>
		</div>
		
		
		
		
	</div>
	</body>
	<script>
		//窗口大小变化时候，进行刷新页面操作，防止样式混乱
		         
	    
		function resize() {           
			document.getElementById("h1").innerHTML = $("body").width() + "-" + $("body").height()
			var tx=$("body").width()-100;
			var ty=$("body").height()-100;

 
		}
	</script>

</html>